<template>
    <div class="list-wrapper">
        <div class="wx-pay-top">
            <el-date-picker v-model="time" type="daterange" placeholder="请选择缴费时间" @change="handleChange"></el-date-picker>
            <el-button type="primary" @click="download">导出</el-button>
        </div>
    <table class="list-table" border="0" cellspacing="0" cellpadding="0">
      <thead>
      <tr>
        <th width="160">身份证号码/SIB</th>
        <th>姓名</th>
        <th>电话</th>
        <th>职位</th>
        <th>培训课程</th>
        <th>开班时间</th>
        <th width="200">订单号</th>
        <th>缴费金额</th>
        <th>缴费时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="item in list" :key="item.id">
        <td style="color: #009EFF; cursor: pointer;" @click="traineeDetail(item.traineeid)">{{item.idcard||item.sib}}</td>
        <td>{{item.name || item.ename}}</td>
        <td>{{item.tel}}</td>
        <td>{{item.zhiwu}}</td>
        <td style="color: #009EFF; cursor: pointer;" @click="trainingDetail(item.trainingid)">{{item.course}}</td>
        <td>{{item.startdate}}</td>
        <td>{{item.trade}}</td>
        <td>{{item.money}}</td>
        <td>{{item.time}}</td>
        <td>
          <el-button type="danger" size="small" @click="refund(item.id, item.money)">退款</el-button>
        </td>
      </tr>
      </tbody>
    </table>
    <el-dialog title="退款" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="退款金额" prop="money">
          <el-input v-model.number="form.money" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <div class="namtc-pagination">
      <el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="10"
                     layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      time: [],
      page: 1,
      total: 0,
      list: [],

      dialogFormVisible: false,
      form: {
        id: '',
        total: '',
        money: ''
      },
      rules: {
        money: [
          { type: 'number', required: true, message: '请输入退款金额', trigger: 'blur' }
        ]
      }
      
    };
  },

  methods: {
    fetchData() {
      let data = {
        time: this.time,
        page: this.page
      };
      this.apiPost("Operation/wxPayRecord", data).then(res => {
        this.list = res.list;
        this.total = parseInt(res.total);
      });
    },

    handleCurrentChange(val) {
      this.page = val;
      this.fetchData();
    },

    traineeDetail(id) {
      router.push("/trainee/detail/" + id);
    },
    trainingDetail(id) {
      router.push("/training/listDetail/" + id);
    },
    handleChange() {
      this.fetchData();
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    download() {
      let data = {
        time: this.time
      };
      this.apiPost("Operation/wxPayRecordDownload", data).then(res => {
        let total = 0
        res.forEach(item=>{
            total += item.money
            item.name = item.name||item.ename
            item.idcard = item.idcard||item.sib
        })
        let data = {
            name: '合计',
            money: total
        }
        res.push(data)
        require.ensure([], () => {
          const { export_json_to_excel } = require('@/vendor/Export2Excel')
          const tHeader = ['姓名', '身份证号/SIB', '电话', '职位', '培训课程', '开班时间', '订单号', '缴费金额', '缴费时间']
          const filterVal = ['name', 'idcard', 'tel', 'zhiwu', 'course', 'startdate', 'trade', 'money', 'time']
          const data = this.formatJson(filterVal, res)
          export_json_to_excel(tHeader, data, '微信缴费记录')
        })
      });
    },
    refund(id, money){
      this.dialogFormVisible = true
      this.form.id = id
      this.form.total = money
      setTimeout(()=>{
        this.$refs.form.resetFields()
      },0)
    },
    submit(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false
          let data = this.form
          if(data.money<=0||data.money>data.total){
            _g.toastMsg('warning','请输入正确的退款金额')
            return false
          }
          this.apiPost('operation/refund', data).then(res=>{
            let error = res.error?'error':'success';
            _g.toastMsg(error, res.msg)
            if(!res.error){
              this.fetchData()
            }else{
              this.dialogFormVisible = true
            }
          })
        } else {
          return false;
        }
      });
      
    }
  },
  created() {
    this.fetchData();
  }
};
</script>
<style scoped>
.wx-pay-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
</style>
